{% extends 'layout/main.html' %}
{% from 'macros/_macros.html' import render_pagination %}

{% block head %}
{{ super() }}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
{% endblock head %}

{% block content_header %}
<div class="row page-titles">
  <div class="col-md-5 col-8 align-self-center">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">首页</a></li>
      <li class="breadcrumb-item active">文章列表</li>
    </ol>
  </div>
</div>
{% endblock %}


{% block content %}
<style>
  .checkbox {
    margin-top: 0px;
    height: 20px;
  }
</style>
<div class="row" id="app">
  {% include 'admin/article/_left.html' %}
  <div class="col-sm" style="overflow: hidden;">
    <div class="card">
      <div class="card-body">
        <a href="{{ url_for('article.create', cid=request.args.get('cid', 1)) }}"
          class="btn btn-danger p-10 waves-effect waves-light">
          添加文章
        </a>
        <div class="table-responsive">
          <table id="dataTable" class="table table-hover table-bordered m-t-10 text-nowrap">
            <thead>
              <tr>
                <th style="width: 10px">
                  <div class="checkbox">
                    <input class="ids" type="checkbox" id="check_box">
                    <label for="check_box"></label>
                  </div>
                </th>
                <th>标题</th>
                <th width="100">作者</th>
                <th width="100">单位</th>
                <th width="170">创建时间</th>
                <th width="80">状态</th>
                <th style="width: 60px">操作</th>
              </tr>
            </thead>
            <tbody>
              {% if model %}
              {% for item in model %}
              <tr {% if item.rid %}class="text-muted" {% endif %}>
                <td>
                  <div class="checkbox">
                    <input class="ids" type="checkbox" id="checkbox{{item.id}}" data-sort="{{ item.sort|int }}"
                      data-rid="{{ item.rid|int }}" data-title="{{ item.title }}"
                      data-audit_status="{{ item.audit_status }}" value="{{item.id}}"
                      {% if item.rid %}disabled{% endif %} name="ids[]">
                    <label for="checkbox{{item.id}}"></label>
                  </div>
                </td>
                <td>
                  <a href="{{ url_for('article.view', id=item.id) }}"> {{ item.title }} </a>
                  {% if current_user.role.name == 'Edit' %}
                    {% if item.edit_content is none %}
                      <span style="color:red"> [未编辑] </span>
                    {% else %}
                      <span style="color:green"> [已编辑] </span>
                    {% endif %}
                  {% endif %}
                </td>
                <td>{{ item.user.nickname }}</td>
                <td>{{ item.user.company.name }}</td>
                <td>{{ moment(item.created_at).format('Y-MM-DD hh:mm:ss') }}</td>
                <td>
                  <div class="btn-group">
                    <button type="button" {% if item.report is not none %}disabled{% endif %}
                      class="btn btn-{{ item.audit_status|audit_status_button }} dropdown-toggle" data-toggle="dropdown"
                      aria-haspopup="true" aria-expanded="false">
                      {{ item.audit_status|audit_status|safe }}
                    </button>

                    {% if current_user.role.name == 'Head' %}
                    <div class="dropdown-menu" x-placement="bottom-start">
                      <a class="dropdown-item" href="{{ url_for('article.audit_status', id=item.id, status=9) }}">通过</a>
                      <a class="dropdown-item" href="{{ url_for('article.audit_status', id=item.id, status=10) }}">退回</a>
                    </div>
                    {% endif %}

                    {% if current_user.role.name == 'Audit' %}
                    <div class="dropdown-menu" x-placement="bottom-start">
                      <a class="dropdown-item" href="{{ url_for('article.audit_status', id=item.id, status=7) }}">通过</a>
                      <a class="dropdown-item" href="{{ url_for('article.audit_status', id=item.id, status=8) }}">退回</a>
                    </div>
                    {% endif %}

                    {% if current_user.role.name == 'Administrator' %}
                    <div class="dropdown-menu" x-placement="bottom-start">
                      <a class="dropdown-item" href="{{ url_for('article.audit_status', id=item.id, status=9) }}">一审通过</a>
                      <a class="dropdown-item" href="{{ url_for('article.audit_status', id=item.id, status=10) }}">一审退回</a>
                      <a class="dropdown-item" href="{{ url_for('article.audit_status', id=item.id, status=7) }}">二审通过</a>
                      <a class="dropdown-item" href="{{ url_for('article.audit_status', id=item.id, status=8) }}">二审退回</a>
                    </div>
                    {% endif %}

                  </div>
                </td>
                <td class="text-nowrap">
                  <div style="display: flex">

                    {% if current_user.role.name == 'User' %}
                    <a href="{{ url_for('article.update', id=item.id) }}" data-toggle="tooltip" data-original-title="编辑">
                      <i class="fa fa-pencil text-inverse m-r-10"></i> </a>
                    {% endif %}

                    {% if current_user.role.name == 'Edit' %}
                    <a href="{{ url_for('article.edit', id=item.id) }}" data-toggle="tooltip" data-original-title="编辑">
                      <i class="fa fa-pencil text-inverse m-r-10"></i> </a>
                    {% endif %}

                    {% if current_user.role.name not in ['Edit', 'Head'] %}
                    <a href="javascript:void(0)" onclick="sa_warning(event)" data-toggle="tooltip"
                      data-original-title="删除">
                      <span class="fa fa-close text-danger" data-id="{{ item.id }}"></span></a>
                    {% endif %}

                  </div>
                </td>

              </tr>
              {% endfor %}
              {% endif %}
            </tbody>
          </table>
        </div>
        <div class="row">
          <div class="col-sm">
            <div class="btn-group m-b-10 m-r-10" role="group">
              <button type="button" @click="choose" class="btn btn-secondary">全选/取消</button>
              {% if current_user.role.name not in ['Edit', 'Head'] %}
              <button type="button" @click="submit_delete" class="btn waves-effect waves-light btn-danger">删除</button>
              {% endif %}
            </div>
            {% if current_user.role.name == 'Edit' %}
            <div class="btn-group m-b-10 m-r-10">
              <button type="button" @click="report" class="btn btn-warning">生成专报</button>
            </div>
            {% endif %}
          </div>
          <div class="modal fade" id="modal-default" style="display: none;">
            <div class="modal-dialog" v-if="news_items">

              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span></button>
                  <h4 class="modal-title">生成专报表单</h4>
                </div>
                <div class="modal-body">

                  <div class="row">
                    <div class="col-sm">
                  <div class="form-group ">
                    <label for="title">专报时间</label>
                    <input v-model="form.title" name="title" placeholder="例:2019-03-24" required="required" type="text" value=""
                      class="form-control">
                  </div>

                    </div>

                    <div class="col-sm">
                  <div class="form-group ">
                    <label for="title">专报期数</label>
                    <input v-model="form.sub_title" name="title" placeholder="专报期数 例：1" required="required"
                      type="text" value="" class="form-control">
                  </div>
                  </div>


                  </div>

                  <div class="form-group ">
                    <label for="title">报:</label>
                    <input v-model="form.report_person" name="report_person" placeholder="报送单位" required="required"
                      type="text" value="" class="form-control">
                  </div>

                  <div class="form-group ">
                    <label for="title">送:</label>
                    <input v-model="form.push_person" name="push_person" placeholder="" required="required"
                      type="text" value="" class="form-control">
                  </div>

                  <div class="row">

                    <div class="col-sm">
                  <div class="form-group ">
                    <label for="title">份数:</label>
                    <input v-model="form.num" name="num" placeholder="" required="required"
                      type="text" value="" class="form-control">
                  </div>
                  </div>

                    <div class="col-sm">
                  <div class="form-group ">
                    <label for="title">编校:</label>
                    <input v-model="form.edit_person" name="edit_person" placeholder="" required="required"
                      type="text" value="" class="form-control">
                  </div>
                  </div>

                    <div class="col-sm">
                  <div class="form-group ">
                    <label for="title">签发:</label>
                    <input v-model="form.sign_issue" name="sign_issue" placeholder="" required="required"
                      type="text" value="" class="form-control">
                  </div>
                  </div>


                  </div>


                  <div class="panel panel-default">
                    <table class="table table-bordered table-striped">
                      <thead>
                        <tr>
                          <th width="100">排序</th>
                          <th>标题</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="item in news_items">
                          <th scope="row">
                            <div class="input-group input-group-sm">
                              <input type="hidden" :data-ids="item.id">
                              <input type="text" class="form-control form_items" v-model="item.sort"
                                style="height:24px; line-height: 24px;">
                            </div>
                          </th>
                          <td>${item.title}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                  <input @click="submit_report" :disabled="isDisabled" value="提交" class="btn btn-primary">
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm justify-content-end">
            {{ render_pagination(pagination) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
      form: {
        title: null,
        sub_title: null,
        report_person: null,
        push_person: null,
        edit_person: null,
        sign_issue: null,
        num: null
      },
      isDisabled: false,
      news_items: []
    },
    created: function () {
    },
    methods: {
      report: function () {
        let news_items = []
        let is_show = true
        if ($("input[name='ids[]']:checked").length === 0) {
          swal("没有选择文章!")
          return false
        }
        $("input[name='ids[]']:checked").each(function () {
          console.log($(this)[0])
          if ($(this)[0].dataset['audit_status'] !== '7') {
            is_show = false
            swal("只能选择已通过的文章生成专报!")
          }
        })
        if (!is_show) {
          return false
        }
        $('#modal-default').modal('show')
        $("input[name='ids[]']:checked").each(function () {
          news_items.push({
            'id': $(this).val(),
            'title': $(this)[0].dataset['title'],
            'rid': $(this)[0].dataset['rid'],
            'sort': $(this)[0].dataset['sort']
          })
        })
        this.news_items = news_items
      },
      choose: function () {
        let check_box = $('#check_box')
        $("input[name='ids[]']:enabled").prop('checked', !check_box.is(':checked'))
        check_box.prop('checked', !check_box.is(':checked'))
      },
      submit_report: function () {
        let valArr = []
        let _this = this
        if (this.title === null) {
          swal("标题不能为!")
          return false
        }
        _this.isDisabled = true
        $.post({
          url: "{{ url_for('report.ajax_report') }}",
          data: {
            'csrf_token': '{{ csrf_token() }}',
            'title': this.form.title,
            'sub_title': this.form.sub_title,
            'report_person': this.form.report_person,
            'push_person': this.form.push_person,
            'edit_person': this.form.edit_person,
            'sign_issue': this.form.sign_issue,
            'num': this.form.num,
            'items': JSON.stringify(this.news_items)
          },
          success: function (result) {
            window.location.href = '/report'
            return false
          },
          complete: function (x, s) {
            _this.isDisabled = false
          }
        })
      },
      submit_delete: function () {
        let chk_value = [];
        $("input[name='ids[]']:checked").each(function () {
          chk_value.push($(this).val())
        })
        if (chk_value.length === 0) {
          swal("没有选择文章!")
          return false
        }
        swal({
          title: "您确定?",
          text: "您确定要删除这文章吗，删除后放入回收站!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "是的, 我确定!",
          cancelButtonText: "取消操作"
        }, function () {
          $.post({
            url: "{{ url_for('.ajax_delete') }}",
            data: {
              'csrf_token': '{{ csrf_token() }}',
              'ids': JSON.stringify(chk_value)
            },
            success: function (result) {
              if (result.success) {
                window.location.reload()
              }
            }
          })
        })
      }
    }
  })
  $(function () {
    $('#check_box').click(function () {
      $("input[name='ids[]']:enabled").prop('checked', this.checked)
      // $("input[name='ids[]']").prop('checked', this.checked)
    })
  })
  function sa_warning(e) {
    swal({
      title: "您确定?",
      text: "您确定要删除这文章吗，删除后放入回收站!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "是的, 我确定!",
      cancelButtonText: "取消操作",
      closeOnConfirm: false
    }, function () {
      window.location.href = '/article/delete/' + e.srcElement.dataset['id']
    })
  }
</script>
{% endblock scripts %}